<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Login Page | Amaze UI Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="__PUBLIC__/vendor/assets/i/favicon.png">
    <link rel="stylesheet" href="__PUBLIC__/vendor/assets/css/amazeui.min.css"/>
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>新用户注册</h1>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-4 am-u-md-8 am-u-sm-centered">
        <h3>请填写：</h3>
        <hr>
        <div class="am-btn-group">
            <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>
            <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i>
                Google+</a>
            <a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i>
                stackOverflow</a>
        </div>
        <br>
        <br>

        <form method="post" class="am-form">
            <div class="am-input-group ">
                <span class="am-input-group-label "><i class="am-icon-user am-icon-fw"></i></span>
                <input type="text" class="am-form-field" id="username" placeholder="请输入用户名">
            </div>
            <br>
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-envelope-o am-icon-fw"></i></span>
                <input type="text" class="am-form-field" id="email" placeholder="请输入邮箱">
            </div>
            <br>
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-mobile am-icon-fw"></i></span>
                <input type="text" class="am-form-field" id="mobile" placeholder="请输入手机号码">
            </div>
            <br>
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                <input type="password" class="am-form-field" id="password" placeholder="请输入密码">
            </div>
            <br>
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                <input type="password" class="am-form-field" id="check_password" placeholder="请再次输入密码">
            </div>
            <br>
            <br/>
            <div class="am-cf">
                <input type="submit" name="" value="提 交" class="submit am-btn am-btn-primary am-btn-sm am-fl">
                <input type="submit" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fr">
            </div>
        </form>
        <hr>
        <p>© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </div>
</div>
<script src="__PUBLIC__/vendor/assets/js/jquery.min.js"></script>
<script>
    $(function () {
        $('.submit').click(function () {
            var info = {
                username: $('#username').val(),
                email: $('#email').val(),
                mobile: $('#mobile').val(),
                password: $('#password').val(),
                check_password: $('#check_password').val()
            }
            //js验证
            if (info.username.length < 5) {
                alert('用户名长度不能小于5位');
                return false;
            }
            if (/^[0-9]*$/.test(info.username)) {
                alert('您输入的用户名不能为纯数字');
                return false;
            }
            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            if (!reg.test(info.email)) {
                alert('您输入的邮箱格式不对');
                return false;
            }
            var regs = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,6,7,8]{1}\d{8}$|^18[\d]{9}$/;
            if (!regs.test(info.mobile)) {
                alert('您输入的手机格式不正确');
                return false;
            }
            if (info.password.length < 6) {
                alert('密码长度不能小于6位');
                return false;
            }
            if (info.check_password != info.password) {
                alert('两次密码输入不一致，请重新输入');
                return false;
            }
            //发送ajax请求
            $.post("{{:U('ajax_register')}}", info, function (info) {
                if (info.status == 1) {
                    alert(info.msg);
                    location.href = "{{:U('User/login')}}";

                } else {
                    alert(info.msg);
                }
            })
            return false;
        })
    })

</script>
</body>
</html>
